<template>
    <div style="height: 80%;">
        <h2>选择问卷</h2>
        <el-form :inline="true" :model="queryParam" style="text-align: center;">
            <el-form-item label="问卷名">
                <el-input v-model="queryParam.name" placeholder="" @keyup.enter.native.prevent="query()"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query()">查询</el-button>
                <el-button type="primary" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="pageData.rows" stripe>
            <el-table-column align="center" min-width="30" label="问卷名" prop="name"></el-table-column>
            <el-table-column align="center" min-width="40" label="创建时间" prop="createTime"></el-table-column>
            <el-table-column align="center" min-width="10" label="操作">
                <template slot-scope="props">
                    <el-radio v-model="radio" @change="handleRadioChange" :label="props.row.id">&nbsp;</el-radio>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-inner">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="pageData.currentPage" :page-size="pageData.pageSize"
                           :page-sizes="pageData.pageSizes"
                           layout="total, prev, pager, next, jumper" :total="pageData.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import dateUtils from "@/common/date_util"
    import CONSTANTS from "../../common/constants"
    import {mapActions, mapGetters} from 'vuex';

    export default {
        name: "questionnaireSelect",
        computed: {
            ...mapGetters('questionnaire', [
                'pageData',
                'pageParam'
            ])
        },
        data() {
            return {
                queryParam: {
                    name: "",
                    limit: 5,
                    state: CONSTANTS.QUESTIONNAIRE.ISSUE
                },
                radio: ""
            }
        },
        methods: {
            ...mapActions('questionnaire', [
                'listQuestionnairesByPageAct',
                'resetPageAct',
                'setQuestionnaireSelectAct'
            ]),
            handleCurrentChange(val) {
                let _this = this;
                let param = _this.pageParam;
                param.limit = _this.queryParam.limit;
                param.state = _this.queryParam.state;
                param.page = val;
                _this.listQuestionnairesByPageAct(param);
            },
            handleSizeChange(val) {
                let _this = this;
                let param = _this.pageParam;
                param.limit = _this.queryParam.limit;
                param.state = _this.queryParam.state;
                param.pageSize = val;
                _this.listQuestionnairesByPageAct(param);
            },
            handleRadioChange() {
                let _this = this;
                let param = {
                    id: _this.radio
                };
                _this.setQuestionnaireSelectAct(param);
            },
            query() {
                let _this = this;
                let param = _this.pageParam;
                param.name = _this.queryParam.name;
                param.limit = _this.queryParam.limit;
                param.state = _this.queryParam.state;
                this.listQuestionnairesByPageAct(param);
            },
            reset() {
                let _this = this;
                _this.queryParam.name = "";
                let param = [];
                param.limit = _this.queryParam.limit;
                param.state = _this.queryParam.state;
                _this.resetPageAct(param);
            }
        },
        mounted() {
            let _this = this;
            _this.reset();
        }
    }
</script>

<style scoped>

</style>
